<template>
  <div class="menu-demo">
    <a-menu
      :style="{ width: '200px', height: '100%' }"
      :default-open-keys="['0']"
      :default-selected-keys="['0_2']"
      show-collapse-button
      breakpoint="xl"
      @collapse="onCollapse"
    >
      <a-sub-menu key="0">
        <template #icon>
          <icon-apps></icon-apps>
        </template>
        <template #title>创作中心</template>
        <a-menu-item key="0_0">
          <router-link to="/userCreate/addVideo">视频上传</router-link>
        </a-menu-item>
        <a-menu-item key="0_1">
          <router-link to="/userCreate/addActicle">文章上传</router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="1">
        <template #icon>
          <icon-bug></icon-bug>
        </template>
        <template #title>Navigation 2</template>
        <a-menu-item key="1_0">Menu 1</a-menu-item>
        <a-menu-item key="1_1">Menu 2</a-menu-item>
        <a-menu-item key="1_2">Menu 3</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="2">
        <template #icon>
          <icon-bulb></icon-bulb>
        </template>
        <template #title>Navigation 3</template>
        <a-menu-item key="2_0">Menu 1</a-menu-item>
        <a-menu-item key="2_1">Menu 2</a-menu-item>
        <a-sub-menu key="2_2" title="Navigation 4">
          <a-menu-item key="2_2_0">Menu 1</a-menu-item>
          <a-menu-item key="2_2_1">Menu 2</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
    <div class="menu-demo-content">
      <router-view />
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconMenuFold,
  IconMenuUnfold,
  IconApps,
  IconBug,
  IconBulb,
} from "@arco-design/web-vue/es/icon";

export default {
  components: {
    IconApps,
    IconBug,
    IconBulb,
  },
  setup() {
    return {
      onCollapse(val, type) {
        const content =
          type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
        Message.info({
          content,
          duration: 2000,
        });
      },
    };
  },
};
</script>
<style scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  height: 80vh;
  padding: 40px;

  display: flex;
}

.menu-demo-content {
  width: 100%;
  height: 100%;
}
</style>
